<template>
  <div>
    <div class="right-tool" v-if="isShowRightToolbar">
      <RightToolbar @queryTable="queryTable" :columns="tableConfig"></RightToolbar>
    </div>
    <el-table v-if="isShowTable" ref="tableComponentsRef" style="width: 100%" :data="tableData" :border="tableBaseConfig.border" stripe
      :height="tableBaseConfig.height" :indent="tableBaseConfig.indent" :header-cell-style="tableBaseConfig.headerStyle"
      :show-header="tableBaseConfig.showHeader" :highlight-current-row="tableBaseConfig.showHighlightRow"
      :default-expand-all="treeConfig.defaultExpandAll" :tree-props="treeConfig.treeProps" :expand-row-keys="treeConfig.expandRowKeys"
      :row-key="rowKey" :size="sizeTable" :max-height="tableBaseConfig.maxHeight" @selection-change="handleSelectionChange" @select="rowSelect"
      @select-all="selectAll" @row-click="handleRowClick">
      <!-- 选择 -->
      <el-table-column v-if="isSelect" type="selection" width="55" align="center" reserve-selection />
      <!-- 序号 -->
      <el-table-column v-if="isIndex" width="60" label="序号" align="center" fixed="left">
        <template #header>
          <div class="headerStyle">序号</div>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="isPageIndex" width="60" label="序号" align="left" fixed="left">
        <template #header>
          <div class="headerStyle">序号</div>
        </template>
        <template slot-scope="scope">
          <span>{{
            scope.$index +
            (queryParams.currentPage - 1) * queryParams.pageSize +
            1
          }}</span>
        </template>
      </el-table-column>
      <!-- 正常行 start -->
      <template v-for="(item, index) in tableConfig">
        <el-table-column :key="item.prop" v-if="isShowRightToolbar ? tableConfig[index].visible : true" :label="item.label" :width="item.width"
          :sortable="item.sortable && true" :align="item.align ? item.align : 'center'" :fixed="item.fixed || false"
          :show-overflow-tooltip="item.showTooltip ? item.showTooltip() : true">
          <template #header>
            <el-tooltip placement="top" title="" :content="item.label" :offset="15">
              <div class="headerStyle">{{ item.label }}</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <!-- 正常可操作表格 -->
            <template v-if="(scope.row.isHandle&&item.isEdit)|| item.isEditPro">
              <!-- input type-->
              <el-input v-if="item.isType === 'Input'" v-model="scope.row[item.prop]" :placeholder="item.placeholder" :size="item.size || 'small'"
                :clearable="item.clearable || true" @input="item.method && item.method(scope.row, item.prop)"></el-input>
              <el-input v-if="item.isType === 'Textarea'" type="textarea" v-model="scope.row[item.prop]" :placeholder="item.placeholder"
                :size="item.size || 'small'" :clearable="item.clearable || true" @input="item.method && item.method(scope.row, item.prop)"></el-input>
              <el-input-number v-if="item.isType === 'InputNum'" v-model="scope.row[item.prop]" :label="item.label" :size="item.size || 'small'"
                :clearable="item.clearable || true" @input="item.method && item.method(scope.row, item.prop)"></el-input-number>
              <!-- select type-->
              <el-select v-if="item.isType === 'Select'" style="width: 100%" v-model="scope.row[item.prop]" :placeholder="item.placeholder"
                :size="item.size || 'small'" :clearable="item.clearable || true" :multiple="item.multiple" :remote="item.remote"
                :remote-method="item.remoteMethod" :collapse-tags="item.collapseTags" :multiple-limit="item.multipleLimit"
                :filterable="item.filterable" @change="item.method && item.method(scope.row, item.prop, item)">
                <el-option v-for="(opItem, index) in item.options" :key="index" :label="item.params ? opItem[item.params.label] : opItem.label"
                  :value="item.params ? opItem[item.params.value] : opItem.value">
                  <template v-if="opItem.rightHint">
                    <span style="float: left">{{ item.params ? opItem[item.params.label] : opItem.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 16px">
                      {{ opItem.rightHint }}
                    </span>
                  </template>
                  <template v-else>
                    {{ item.params ? opItem[item.params.label] : opItem.label }}
                  </template>
                </el-option>
              </el-select>
              <!-- date type -->
              <el-date-picker v-if="item.isType === 'Date'" :type="item.isDateType || 'date'" style="width: 100%" v-model="scope.row[item.prop]"
                :placeholder="item.placeholder" :size="item.size || 'small'" :clearable="item.clearable || true" :format="item.format || 'yyyy-MM-dd'"
                :value-format="item.valueFormat || 'yyyy-MM-dd'" @change="item.method&&item.method(scope.row, item.prop)"></el-date-picker>
              <!-- radio type -->
              <el-radio-group v-if="item.isType === 'Radio'" v-model="scope.row[item.prop]" :placeholder="item.placeholder"
                :size="item.size || 'small'" :clearable="item.clearable || true" @change="item.method(scope.row, item.prop)">
                <el-radio :label="opItem.label" v-for="(opItem, index) in item.options" :key="index" :rules="item.rules"></el-radio>
              </el-radio-group>
              <!-- switch type -->
              <el-switch v-if="item.isType === 'Switch'" class="switch-btn-style" v-model="scope.row[item.prop]" :clearable="item.clearable || true"
                :size="item.size || 'small'" :active-color="variables.switchActiveColor" :inactive-color="variables.switchInactiveColor"
                :active-icon-class="variables.switchActiveIconClass" :active-text="item.activeText" :inactive-text="item.inactiveText"
                @change="item.method && item.method(scope.row)"></el-switch>
              <span v-if="item.isHandleBtn === 'Link'" class="m-l-10">
                <el-link :underline="false" :type="item.isHandleType" @click.native.prevent="item.isHandleMethod(scope.row, index)">
                  {{ item.isHandleText }}
                </el-link>
              </span>
            </template>
            <!-- 普通表格 -->
            <template v-else>
              <!--有图片序号图片-->
              <div v-if="item.imageIndex" style="width: 100%">
                <!-- <img src="@/assets/img/404_cloud.png" />
                {{ item.imageIndex(scope.row)[scope.$index] }} -->
                <img v-if="item.imageIndex(scope.row)[scope.$index]" :src="item.imageIndex(scope.row)[scope.$index]" :alt="item.alt" />
                <span v-else>{{ scope.$index + 1 }}</span>
              </div>
              <!-- slot -->
              <slot v-else-if="item.isSlot" :name="item.prop" :row="scope.row"></slot>
              <!-- 如果是链接 -->
              <el-link v-else-if="item.isLink" :underline="false" :type="item.type"
                @click.native.prevent="item.method && item.method(scope.row, index)">
                {{
                  scope.row[item.prop] || scope.row[item.prop] == 0
                    ? scope.row[item.prop]
                    : "---"
                }}
              </el-link>
              <!-- 如果是button -->
              <el-button v-else-if="item.isButton" :size="item.size || 'mini'" :type="item.type"
                :disable="item.disable ? item.disable(scope.row) : false" :plain="item.plain || false" :round="item.round || false"
                :icon="item.icon || ''" :circle="item.circle || false" @click.native.prevent="item.method(scope.row, index)">
                {{ scope.row[item.prop] ? scope.row[item.prop] : "---" }}
              </el-button>
              <el-switch v-else-if="item.isType === 'Switch'" class="switch-btn-style" v-model="scope.row[item.prop]"
                :clearable="item.clearable || true" :size="item.size || 'small'" :active-color="variables.switchActiveColor"
                :inactive-color="variables.switchInactiveColor" :active-icon-class="variables.switchActiveIconClass" :active-text="item.activeText"
                :inactive-text="item.inactiveText" @change="item.method && item.method(scope.row)"></el-switch>
              <!-- 如果是tag -->
              <el-tag v-else-if="item.isTag" :size="item.size || 'mini'" :type="item.type">{{ scope.row[item.prop] ? scope.row[item.prop] : "---" }}
              </el-tag>
              <!-- 如果有 icon -->
              <span v-else-if="item.isArrow">
                <span>
                  <i :class="[
                      item.isArrow(scope.row).icon,
                      item.isArrow(scope.row).color,
                    ]"></i>
                </span>
                <span :class="item.isArrow(scope.row).color">{{ scope.row[item.prop] ? scope.row[item.prop] : "---" }}
                </span>
              </span>
              <!-- 状态前圆点 -->
              <span v-else-if="item.isStatus">
                <span class="circle" :class="item.isStatus(scope.row).bgColor"></span>&nbsp;&nbsp;
                <span :class="item.isStatus(scope.row).color">
                  {{ scope.row[item.prop] ? scope.row[item.prop] : "---" }}
                </span>
              </span>
              <!-- 状态前圆点可以切换字段展示 -->
              <span v-else-if="item.isStatusDouble">
                <span class="circle" :class="item.isStatusDouble(scope.row).bgColor"></span>&nbsp;&nbsp;
                <span :class="item.isStatusDouble(scope.row).color">
                  {{ item.isStatusDouble(scope.row).label }}
                </span>
              </span>
              <!--颜色字体 -->
              <span v-else-if="item.isColor">
                <span :class="item.isColor(scope.row)">
                  {{ scope.row[item.prop] ? scope.row[item.prop] : "---" }}
                </span>
              </span>
              <!-- 进度条 -->
              <div v-else-if="item.isProgress" style="width: 100%">
                <el-progress :percentage="
                    scope.row[item.prop] ? Number(scope.row[item.prop]) : 0
                  " :color="item.isProgress"></el-progress>
                <!-- <span>{{scope.row[item.prop]}}</span> -->
              </div>
              <div v-else-if="item.popOver">
                <el-popover v-if="item.popOver(scope.row).isPop" :title="item.popOver(scope.row).title"
                  :trigger="item.popOver(scope.row).trigger || 'click'">
                  <p style="position: relative" v-for="item in item.popOver(scope.row).content" :key="item">
                    <span class="round"></span>{{ item }}
                  </p>
                  <el-button slot="reference" type="text">
                    <svg-icon class="svg-icon iconStyle" style="margin-right: 8px"
                      :icon-class="item.popOver(scope.row).iconClass" />{{ item.popOver(scope.row).name || "--" }}</el-button>
                </el-popover>
                <span v-else>
                  <svg-icon class="svg-icon iconStyle" style="margin-right: 8px"
                    :icon-class="item.popOver(scope.row).iconClass" />{{ item.popOver(scope.row).name || "--" }}</span>
              </div>
              <el-link v-else-if="item.isMethod" :underline="false" :type="item.isMethod(scope.row).type"
                @click.native.prevent="item.method(scope.row, index)" style="text-align: left">
                <span :title="item.isMethod(scope.row).name" style="text-align: left">{{ item.isMethod(scope.row).name || "--" }}</span>
              </el-link>
              <!-- 嵌套内容 -->
              <span v-else-if="item.showProp">
                {{ item.showProp(scope.row) }}
              </span>
              <span v-else-if="item.showHint">
                <el-link type="primary" @click="item.method(scope.row, index)">{{ item.showHint(scope.row).name || "--" }}</el-link>
              </span>
              <span v-else-if="item.showWord">
                <div type="primary" @click="item.method(scope.row, index)">{{ item.showWord(scope.row).name || "--" }}</div>
              </span>
              <span v-else-if="item.showArr">
                <p v-for="(item, index) in item.showArr(scope.row).arr" :key="item">
                  {{ index + 1 }}、{{ item }}
                </p>
              </span>
              <!-- 无内容时显示 -->
              <span v-else>
                {{
                  scope.row[item.prop] || scope.row[item.prop] == 0
                    ? scope.row[item.prop]
                    : "---"
                }}
              </span>
            </template>
          </template>
        </el-table-column>
      </template>
      <!-- 正常行 end -->
      <!-- 操作 start -->
      <el-table-column v-if="
          tableAction &&
          tableAction.operations &&
          tableAction.operations.length > 0
        " label="操作" align="center" :width="tableAction.width ? tableAction.width() : null">
        <template #header>
          <div class="headerStyle">操作</div>
        </template>
        <template slot-scope="scope">
          <span v-for="(item, index) in tableAction.operations" :key="index">
            <slot v-if="item.isSlot" :name="item.prop" :row="scope.row"></slot>
            <span class="item-btn" v-else-if="
                item.isShow
                  ? item.isShow(scope.row,index)
                  : item.isShow
                  ? item.isShow()
                  : true
              ">
              <el-link v-if="item.isLink" :underline="false" :type="item.type" :disable="item.disable ? item.disable(scope.row) : false"
                @click.native.prevent="item.method(scope.row, index)">
                {{ item.label }}
              </el-link>
              <el-dropdown v-else-if="item.dropdown">
                <span class="el-dropdown-link">
                  {{ item.label
                  }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(items, keyS) in item.dropArr" :key="keyS" @click.native.prevent="items.method(scope.row, index)">
                    <div v-if="items.isShow ? items.isShow(scope.row) : true">
                      <span v-if="items.type == 'danger'" style="color: red">{{
                        items.name
                      }}</span><span v-else style="color: #5272ec">{{
                        items.name
                      }}</span>
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button class="item-btn" v-else :size="item.size || 'mini'" :type="item.type"
                :disable="item.disable ? item.disable(scope.row) : false" :plain="item.plain || false" :round="item.round || false"
                :icon="item.icon || ''" :circle="item.circle || false" @click.native.prevent="item.method(scope.row, index)">
                {{ item.label }}
              </el-button>
            </span>
          </span>
        </template>
      </el-table-column>
      <!-- 操作 end -->
    </el-table>
    <div class="text-center btn-border" v-if="isAdd" @click="addFun">
      <el-button type="text" icon="el-icon-plus">添加</el-button>
    </div>
    <pagination v-show="isShowPage && queryParams.total > 0" :total="queryParams.total" :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pageSize" :alignStyle="queryParams.alignStyle" :background="paginaBackground" @pagination="getPagination" />
  </div>
</template>

<script>
import variables from '@/assets/styles/common.less'
export default {
  props: {
    paginaBackground: {
      type: Boolean,
      default: true
    },
    isAdd: {
      type: Boolean,
      default: false
    },
    maxHeight: {
      type: String,
      default: 'auto'
    },
    sizeTable: {
      type: String,
      default: 'medium'
    },
    // 有分页序号
    isPageIndex: {
      type: Boolean,
      default: false
    },
    // 没分页的序号
    isIndex: {
      type: Boolean,
      default: false
    },
    isShowRightToolbar: {
      type: Boolean,
      default: false
    },
    // 展示分页
    isShowPage: {
      type: Boolean,
      default: false
    },
    // 分页信息
    queryParams: {
      type: Object,
      default: () => ({
        total: 0
      })
    },
    // 是否选择
    isSelect: {
      type: Boolean,
      default: false
    },
    // 列表数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 表头配置
    tableConfig: {
      type: Array,
      default: () => []
    },
    // 操作
    tableAction: {
      type: Object,
      default: () => ({})
    },
    // 树结构
    treeConfig: {
      type: Object,
      default: () => ({})
    },
    // 行key值
    rowKey: {
      type: String,
      default: () => 'id'
    },
    // 表格属性的对象
    tableBaseConfig: {
      type: Object,
      default: () => {
        return {
          border: true,
          height: null,
          indent: 16,
          headerStyle: {}
        }
      }
    }
  },
  watch: {
    tableData: {
      deep: true,
      handler() {
        // 防止抖动处理
        // this.isShowTable = false;
        // this.$nextTick(() => {
        //   this.isShowTable = true;
        //   if (this.$refs.tableComponentsRef) {
        //     this.$refs.tableComponentsRef.doLayout();
        //   }
        // });
      }
    }
  },
  computed: {
    variables() {
      return variables
    }
  },
  created() { },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  },
  data() {
    return {
      isShowTable: true
    }
  },
  methods: {
    handleResize() {
      this.$nextTick(() => {
        if (this.$refs.tableComponentsRef) {
          this.$refs.tableComponentsRef.doLayout()
        }
      })
    },
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    rowSelect(selection, row) {
      this.$emit('rowSelect', selection, row)
    },
    selectAll(val) {
      this.$emit('selectAll', val)
    },
    handleRowClick(row) {
      this.$emit('handleRowClick', row)
    },

    clearSelection() {
      this.$refs.tableComponentsRef.clearSelection()
    },
    toggleRowSelection(row) {
      this.$refs.tableComponentsRef.toggleRowSelection(row)
    },
    setCurrentRow(row) {
      this.$refs.tableComponentsRef.setCurrentRow(row)
    },
    getPagination() {
      this.$emit('getPagination')
    },
    addFun() {
      this.$emit('add')
    },
    // 刷新
    queryTable() {
      this.$emit('queryTable')
    },
    toggleSelection(array) {
      // 设置默认选中
      this.$refs.tableComponentsRef.clearSelection()
      if (array && array.length) {
        this.tableData.forEach(row => {
          if (array.some(item => item[this.rowKey] === row[this.rowKey])) {
            // 判断回传的数组与表格数据是不是同一个对象
            this.$nextTick(() => {
              console.log('[ row ] >', row)
              this.$refs.tableComponentsRef.toggleRowSelection(row, true)
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .item-btn {
    margin-right: 10px;
    // &:first-child {
    //   margin-left: 0;
    // }
  }
  .right-tool {
    position: absolute;
    right: 0;
    top: 0px;
  }
  // .text-center {
  //   text-align: center;
  // }

  .btn-border {
    border-bottom: 2px dotted #ebeef5;
    border-left: 2px dotted #ebeef5;
    border-right: 2px dotted #ebeef5;
  }
  .headerStyle {
    text-align: center;
    font-size: 18px;
    font-weight: bolder;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .round {
    background-color: #ccc;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .el-dropdown-link {
    color: #5272ec;
    position: relative;
    top: 2px;
    cursor: pointer;
  }
  .iconStyle {
    width: 16px;
    height: 20px;
    position: relative;
    top: 4px;
  }
  :deep(.el-table .cell) {
    font-size: 16px;
  }
  :deep(.el-table th > .cell) {
    font-size: 18px;
  }
  // 表格前面的原点
  .circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    &.blue-bg {
      background: #1f6fef;
    }
    &.green-bg {
      background: #0ccab0;
    }
    &.red-bg {
      background: #f5222d;
    }
  }
</style>
